<template>
	<view class="select-menu" @click="handleClick">
		<view class="value" v-if="date.length>0">
			{{ dayjs(date[0]).format('MM-DD HH:mm')}}-
			{{ dayjs(date[1]).format('MM-DD HH:mm')}}
		</view>
		<view class="placeholder" v-else>
			请选择配送时间
		</view>
		<image class="right-icon" src="@/static/image/right.png"></image>
	</view>
	<up-popup :show="show" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content">
				<template v-if="type === 'start'">
					<view class="title">选择最早出发时间</view>
					<view class="text">最早出发时间：{{ months[startTime[1]] }}月{{ days[startTime[2]] }}日{{ days[startTime[3]-1] }}时</view>
				</template>
				<template v-if="type === 'end'">
					<view class="title">选择最晚出发时间</view>
					<view class="text">最晚出发时间：{{ months[endTime[1]] }}月{{ days[endTime[2]] }}日{{ days[endTime[3]-1] }}时</view>
				</template>
				<picker-view class="picker-view" :value="time" @change="handleChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
					</picker-view-column>
				</picker-view>
				<view class="popup-bottom">
					<view class="up">
						<up-button @click="handleLastClick" type="info" text="上一步"></up-button>
					</view>
					<up-button @click="handleNextClick" type="primary" :text="type==='start'?'下一步':'确认时间'"></up-button>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import dayjs from 'dayjs'
	const props = defineProps({
		date: {
			type: Array,
			default: () => []
		},
		earliest_time: {
			type: String,
			default: ''
		},
		latest_time: {
			type: String,
			default: ''
		}
	})
	const show = ref(false)
	const newDate = new Date()
	const years = ref([])
	const year = newDate.getFullYear()
	const months = ref([])
	const month = newDate.getMonth() + 1
	const days = ref([])
	const day = newDate.getDate()
	const hours = ref([])
	const hour = newDate.getHours()
	// 用来展示的time
	const time = ref([])
	// 默认最早最晚时间
	const startTime = ref([0, month - 1, day - 1, hour])
	const endTime = ref([0, month - 1, day - 1, hour])
	onMounted(async () => {
		await setTime()
	})
	// 设置数组
	const setTime = () => {
		for (let i = year; i < year + 100; i++) {
			years.value.push(i)
		}
		for (let i = 1; i <= 12; i++) {
			months.value.push(i)
		}
		for (let i = 1; i <= 31; i++) {
			days.value.push(i)
		}
		for (let i = 0; i <= 23; i++) {
			hours.value.push(i)
		}
	}
	// 点击展示
	const handleClick = () => {
		type.value = 'start'
		time.value = startTime.value
		show.value = true
	}
	const handleChange = (e) => {
		time.value = e.detail.value
		if (type.value === 'start') {
			startTime.value = e.detail.value
		} else {
			endTime.value = e.detail.value
		}
	}
	const type = ref('start')
	const emits = defineEmits(['change'])
	// 上一步
	const handleLastClick = () => {
		if (type.value !== 'start') {
			type.value = 'start'
			time.value = startTime.value
		}
	}
	// 下一步
	const handleNextClick = () => {
		if (type.value === 'start') {
			type.value = 'end'
			time.value = endTime.value
		} else {
			// 点击确认时间
			let date = [getDate(startTime.value), getDate(endTime.value)]
			show.value = false
			emits('change', date)
		}
		// emits('next', getDate())
	}
	// 根据time下标获取时间
	const getDate = (timeArr) => {
		let newYear = years.value[timeArr[0]]
		let newMonth = months.value[timeArr[1]]
		let newDay = days.value[timeArr[2]]
		let newHour = hours.value[timeArr[3]]
		let newMinutes = newDate.getMinutes()
		let newSeconds = newDate.getSeconds()
		return `${newYear}-${newMonth}-${newDay} ${newHour}:${newMinutes}:${newSeconds}`
		// return `${newMonth}月${newDay}日 ${newDay}天`
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		text-align: left;

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #2C1F21;
			line-height: 33rpx;
			margin-bottom: 30rpx;
		}

		.popup-bottom {
			display: flex;
			margin-top: 20rpx;

			.up {
				width: 50%;
				margin-right: 20rpx;
			}
		}
	}
</style>